
/**
 * create by Alec
 */
import React, { Component, PureComponent } from "react";
import PropTypes from "prop-types";
import "./index.less"
import { Icon } from "@ali/ding-ui";

class DateRange extends Component {
    constructor(props) {
        super(props);
    }

    static defaultProps = {
        showPeriodPicker: true,
    };

    static propTypes = {
        currentTime: PropTypes.object, // 当前时间范围
        lastTime: PropTypes.object, // 上一个时间范围
        nextTime: PropTypes.object, // 下一个时间范围
        totalEmployee: PropTypes.number, // 总人数
        period: PropTypes.string, // 以周还是月份
        onLeftClick: PropTypes.func, // 左侧按钮
        onRightClick: PropTypes.func, // 右侧按钮
        togglePeriod: PropTypes.func,
    };
    render() {
        const { currentTime = {} , lastTime = {}, nextTime = {}, totalEmployee, period, showPeriodPicker } = this.props;
        return (
            <div className="date-range-container">
                {
                    showPeriodPicker ? 
                    <PeriodPicker 
                        togglePeriod={this.props.togglePeriod}
                        period={period}
                    /> : null 
                }
                <div className="date-range">
                    <span className={`left ${!lastTime.value && 'disabled'}`} onClick={ () => {
                        window._rlog(`_stat_arrow_${period}_left`);
                        this.props.onLeftClick(lastTime.value) 
                    }}>
                        <Icon type="left" />
                    </span>
                
                    <span className="center">
                        {currentTime.showValue}
                        {
                            totalEmployee > 0 &&
                            <span>
                                &nbsp;&nbsp;在职{totalEmployee}人
                            </span>
                        }
                    </span>
                
                    <span className={`right ${!nextTime.value && 'disabled'}`} onClick={ () => {
                        window._rlog(`_stat_arrow_${period}_right`);
                        this.props.onRightClick(nextTime.value) }
                    }>
                        <Icon type="right" />
                    </span>
                    
                </div>
            </div>
        )
    }
}

class PeriodPicker extends PureComponent {
    render(){
        const { togglePeriod, period } = this.props;
        return (
            <div className="period-picker">
                <div 
                    className={`picker-item ${ period === 'week' ? 'active' : '' }`}
                    onClick={()=>{
                        window._rlog(`_stat_week`);
                        togglePeriod('week')}
                    }>
                    周统计
                </div>
                <div 
                    className={`picker-item ${ period === 'month' ? 'active' : '' }`}
                    onClick={()=>{
                        window._rlog(`_stat_month`);
                        togglePeriod('month')}
                    }>
                    月统计
                </div>
            </div>
        )
    }
}

export default DateRange;
